<template>
  <div>
<!--    <H1 v-text="msg" id="title"></H1>-->
    <H1 v-text="msg" ref="title"></H1>
<!--    使用ref获取组件的this，用于后期的组件间通信-->
    <button @click="showDom" ref="button" >点我获取上方的dom</button>

    <School ref="school"></School>
    <Student></Student>
  </div>
</template>

<script>
//导入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: 'App',
  components: {
    School,
    Student
  },
  data() {
    return {
      msg: 'this is msg'
    }
  },
  methods:{
    showDom() {
      // console.log(document.getElementById('title'))
      console.log(this.$refs.title)
      console.log(this.$refs.button)
      console.log(this.$refs.school)
    },
  }
}
</script>
